<template>
	<div>
		<div class="header">

			<!-- title="智能供佛系统" -->
			<van-nav-bar style="  background: linear-gradient(90deg, #41A9B7,#4fd4e2, #41A9B7);height:  5rem;;line-height:  5rem;">
				<span class="title" slot="title">订单管理</span>
				
				<span style="font-size:1.5625rem ; color: white; font-weight: 500;" slot="right">
					<van-button type="primary" color="#348994" @click="back">&nbsp;返&nbsp;&nbsp;&nbsp;回&nbsp;</van-button>
				</span>
			</van-nav-bar>
			<!-- <van-nav-bar title="智能供佛系统" style=" background: url(./images/系统标题部分.png);height: 80px;line-height: 80px; background-size:1142px 80px;background-repeat:no-repeat;">
				<van-icon name="search" slot="right" />
			</van-nav-bar> -->
		</div>
		<!-- /////////////////////////////////////////////////////////// -->
		<div class="content" style=" text-align: center;">


			<div style="	 background-color:  #379c94;		width: 94%;	margin-left: 3%; margin-right: 3%;margin-top: 3%;	 border:  solid  #379c94  0.2px; border-radius: 10px;box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);">
				
				
				<div style="width: 96%;margin:2%; 
							 border: #000080 ;  border-radius: 20px;
							 background-color:  #379c94;
							 ">
				
				
								<div style=" 	 line-height: 3rem;	height: 3rem;	text-align: left;margin-bottom: 1rem;font-size: 1rem;color: #5a8078;font-weight: bold;">
							
				
				
				
									<el-row :gutter="0">
				
										<el-col :span="2">
											<div>
				
				
												<span style="padding-left: 1rem;">状态:</span>
											</div>
										</el-col>
				
										<el-col :span="10">
											<div>
				
				
				
				
			
												<el-radio-group @change="changeState()" v-model="radio">
													<el-radio border :label="2">未确认</el-radio>
													<el-radio border :label="1">已确认</el-radio>
													<el-radio border :label="0">全部</el-radio>
												</el-radio-group>
				
				
				
				
				
				
				
				
											</div>
										</el-col>
				
				
				
										<!-- 	<el-col :span="2">
										<div>
										<span style="padding-left: 1rem;">时间:</span>
										</div>
									</el-col>
										
										<el-col :span="5">
											<div>
												
												<el-checkbox-group v-model="checkList">
													<el-checkbox border label="今天"></el-checkbox>
													<el-checkbox border label="近一周"></el-checkbox>
													
												</el-checkbox-group>
										
											</div>
										</el-col> -->
				
				
				
				
				
										<el-col :span="11">
				
											<div style="text-align: right;">
												<el-input 
											
												
												@focus="keyboardShow=true"
												clearable style="width: 20rem;" prefix-icon="el-icon-search" v-model="search" placeholder="请输入用户电话号码查找"></el-input>
												<!-- <el-button @click="findOrder()" type="warning"	color="#ffae00" icon="el-icon-search">搜索</el-button> -->
												<el-button style="margin-left: 4px;"  type="success" icon="el-icon-search"  @click="findOrder()" >搜索</el-button>
												<!-- <van-button icon="search"  @click="findOrder()" color="#2b7c75" circle	  > 搜索 </van-button> -->
											</div>
				
				
				
										</el-col>
				
									</el-row>
				
				
				
				

					
				
				
				
								</div>
				
				
				
				
				
				
								<div>
									<el-table 
									
									
									:style="{'background-color':'#2e827b','border-color': '#379c94'}" :height="tableHeight" :header-cell-style="{'background-color':'#205b55','font-size':'1rem'}"
									 :row-style="{'background-color':'#3fb4a6','height':'3rem','font-size':'1rem'}" highlight-current-row
									 :default-sort="{prop: 'date', order: 'descending'}" size="mini" :data="orderlist.slice((currentPage-1)*pagesize,currentPage*pagesize)"
									 style="width: 100%" @row-dblclick="details">
										<el-table-column type="index" label="序号" align="center" :index="(currentPage - 1) * pagesize + 1" width="80">
										</el-table-column>
											<!--  prop="out_trade_no" -->
									<!-- 	<el-table-column v-if="oid" align="center" prop="oid" label="订单号">
										</el-table-column>
										
										<el-table-column v-else align="center" prop="out_trade_no" label="订单号">
										</el-table-column> -->
				
										<!-- sortable排序 -->
										
										<el-table-column  align="center" prop="departed" label="逝者">
										</el-table-column> 
										
										<el-table-column  align="center" prop="baptismal_name" label="圣名">
										</el-table-column> 
										
										
										
										<el-table-column align="center" prop="supplytime" label="存放时长" width="130">
										</el-table-column>
				
				
										<el-table-column prop="state" label="订单状态" width="130" align="center">
											<template slot-scope="scope">
												<el-tag size="mini" v-if="scope.row.state==1||scope.row.state==3" effect="dark" type="success">已通过</el-tag>
												<el-tag size="mini" v-else effect="dark" type="danger">未确认</el-tag>
											</template>
				
										</el-table-column>
				
				
				
				
										<!-- 	<el-table-column 	align="center"	prop="state" label="状态"> -->
										</el-table-column>
										<el-table-column align="center" prop="price" label="金额(元)" width="150">
										</el-table-column>
				
										<el-table-column align="center" prop="telephone" label="电话/账号" width="200">
										</el-table-column>
										<el-table-column align="center" prop="uname" label="家属姓名" width="160">
										</el-table-column>
				
				
				
										<el-table-column align="center" label="操作" width="160">
				
											<template slot-scope="scope">
												<el-button size="mini" :disabled="scope.row.state!=2" @click="handleEdit(scope.$index, scope.row)" type="success">{{scope.row.state!=2?"已确认":"确认" }}</el-button>
												<el-button :disabled="scope.row.state!=2" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
											</template>
				
										</el-table-column>
				
				
				
				
									</el-table>
									<!-- <div style="background: #d9d9d9;height: 2px;"></div> -->
									<div class="block" style=" background:  #379c94;margin-top:10px;padding: 4px;font-size:1rem;">
										<span class="demonstration"></span>
										<el-pagination 	:small="false"	background prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange"
										 :current-page.sync="currentPage1" :page-size="pagesize" layout="total, prev, pager, next,jumper" :total="orderlist.length">
										</el-pagination>
									</div>
									<!-- <div style="background: white;height: 5px;"></div> -->
				
									<!-- /////////////////////////////////////////////////////订单详情//////////////////////////////////////////////////////// -->
				
				
									<!-- //////////////////////////////////////////////////////////////////////////////////////////////// -->
								</div>
				
				
				
				
							</div>
				
				
			</div>

			

					<van-number-keyboard
					  :show="keyboardShow"
					  @blur="keyboardShow = false"
					  @input="onInput"
					  @delete="onDelete"
					/>

		</div>
	</div>

</template>

<script>
	export default {


		data() {
			return {

			keyboardShow:false,
		
				radio: 2,


				tableHeight: window.innerHeight * 0.6,
				orderlist: [],
				currentPage: 1,
				currentPage1: 1,
				pagesize: 10,
				dialogFormVisible: false,
				loading: true,

				search: "",

				form: {
					name: '6',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				textarea3: "全英雄全皮肤",
				formLabelWidth: '120px',
				checkList: ['未确认'],

				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: ''


			}
		},
		methods: {
			
	
			
			  onInput(value) {
			     	this.search += value;
			    },
			    onDelete() {
			     this.search = this.search.substring(0, this.search.length - 1);
			    },


			del() {
				//this.checkList.length=0;
			},
			
			back(){
				this.$router.go(-1);
			},

			isEdit(scope) {
				if (scope.row.state != 2) {
					return {
						display: 'none'
					};
				}
			},

			handleEdit(index, row) {

				this.$confirm('是否确认通过此订单？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					this.updateOrder(row);


				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取操作！'
					});

					/* this.$toast.success({
					 	message: '已取消操作！'
					 }); */
				});





			},

			handleDelete(index, row) {


				this.$confirm('是否确认删除此订单？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					this.deleteOrder(row);


				}).catch(() => {

					this.$message({
						type: 'info',
						message: '已取操作！'
					});

					/* this.$toast.success({
					 	message: '已取消操作！'
					 }); */
				});

			},

			changeState() {

				this.findOrder();
			},

			deleteOrder(row) {
				
				//deleteOrder
				
				
				this.axios.post('https://mianmianshi.com/cms/temple/client/deleteOrder', {
						id:row.id
					})
					.then((res) => {
						if (res.status == 200) {
				
							this.$toast.success({
								message: '操作成功！'
							});
							
							this.findOrder();
				
							
						}
					})
					.catch((err) => {
						//console.log("失败了");
						console.log(err);
						alert("服务器繁忙，请稍后再试！");
					});
				
				
				
			},

			updateOrder(row) {

				this.axios.post('https://mianmianshi.com/cms/temple/client/updateOrder', {
						where: {
							id: row.id
						}
					})
					.then((res) => {
						if (res.status == 200) {



							//updateLedIsprice//更新led状态
							this.axios.post('https://mianmianshi.com/cms/temple/client/updateLedIsprice', {
									ledList: JSON.parse(row.ledmes),
									isbright: 1

								})
								.then((res) => {
									if (res.status == 200) {

										this.$toast.success({
											message: '操作成功！'
										});

										this.findOrder();
									}
								})
								.catch((err) => {
									//console.log("失败了");
									console.log(err);
									alert("服务器繁忙，请稍后再试！");
								});



						}
					})
					.catch((err) => {
						//console.log("失败了");
						console.log(err);
						alert("服务器繁忙，请稍后再试！");
					});



			},


			findOrder() {
				this.axios.post('https://mianmianshi.com/cms/temple/client/findOrderSelective', {

						state: this.radio, //要没查未确认，要么查全部
						tid: this.$store.getters.getTid|localStorage.tid,
						search: this.search


					})
					.then((res) => {
						if (res.status == 200) {
							this.orderlist = res.data;
						}
					})
					.catch((err) => {
						//console.log("失败了");
						console.log(err);
						alert("服务器繁忙，请稍后再试！");
					});


			},


			getlist: function() {
				this.axios.get('./data/orderlist.json')
					.then((response) => {
						console.log(response.data);
						this.orderlist = response.data;
						this.loading = false;
					})
					.catch(function(error) {
						alert("数据获取失败！")
					});
			},
			handleSizeChange(val) {
				/* console.log(`每页 ${val} 条`); */
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				/* alert(this.currentPage) */
				/* console.log(`当前页: ${val}`); */
			},
			details: function(row, column) {
				console.log(row)
				console.log(row.date)
				this.dialogFormVisible = true
			}




		},

		created() {




			this.findOrder();

		},
		mounted() {

		}

	}
</script>

<style>
	.xundeng {
		position: absolute;
		height: 100%;
		width: 100%;
		background: url(../../public/images/xundeng.png) no-repeat;
		background-size: 100% 100%;
	}
</style>
